<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>layer弹出层</title>
	<!-- 先导入jquery -->
	<!-- <script src="layer/jquery-3.3.1.js"></script> -->
	<!-- 在线的 -->
	<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
	<!-- 再调用主库 -->
	<script src="layer.js"></script>
	

</head>
<body>



<button id="btn-1">小警告框</button>
<button id="btn-2">普通弹窗</button>
<button id="btn-3">弹出iframe</button>
<button id="btn-4">载入中……</button>
<button id="btn-5">工具提示</button>
<button id="btn-6">指定弹出地方</button>
<button id="btn-7">简单alert~</button>
<button id="btn-8">多个按钮</button>
<button id="btn-9">随便一弹出</button>
<button id="btn-0">朕的弹窗！！！</button>
<h3><a href="http://www.layui.com/doc/modules/layer.html">在线帮助</a></h3><br/>
<h4>自定义样式：<br/>
//单个使用<br/>
layer.open({<br/>
  skin: 'demo-class'<br/>
});<br/>
//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高<br/>
layer.config({<br/>
  skin: 'demo-class'<br/>
})   //例如<br/>
layer.config({<br/>
  extend: 'myskin/style.css', //加载您的扩展样式<br/>
  skin: 'layer-ext-yourskin'<br/>
});<br/>
//CSS <br/>
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}<br/>
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}<br/>
body .demo-class .layui-layer-btn a{background:#333;}<br/>
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}<br/>
…
加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。<br/> 
</h4>
<script type="text/javascript">
//001.小警告弹窗
$('#btn-1').click(function(){
	layer.msg('Hello');
});
//002.普通弹窗
$('#btn-2').on('click',function(){
	layer.open({
		type: 1,		//弹窗类型:0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
		area: ['600px','360px'],
		shadeClose: true, //点击遮罩关闭
		//content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		content: '\<\div style="padding:20px;">我是一个模态框\<\/div>',
		skin: 'layui-layer-molv'	//皮肤,允许你传入layer内置的样式class名layui-layer-lan layui-layer-molv
	});
});
//003.弹出个iframe层
$('#btn-3').click(function(){
	layer.open({
      type: 2,
      title: 'iframe父子操作',	//除了这么写，还可以玩点花样：title: ['文本', 'font-size:18px;']
      maxmin: true,		//最小化按钮
      shadeClose: true, //点击遮罩关闭层
      area : ['800px' , '520px'],	//大小	默认是自动
      //如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
      content: 'http://www.baidu.com'
    });
});
//004.弹出载入小gif
$('#btn-4').click(function(){
	var ii = layer.load();
    //此处用setTimeout演示ajax的回调
    setTimeout(function(){
      layer.close(ii);
    }, 1000);
});
//005.工具提示
$('#btn-5').click(function(){
	//这里也可以用open调用，于是content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
	layer.tips('Hello tips!', '#btn-5');
});
//006.弹出的地方
$('#btn-6').click(function(){
	layer.open({
      type: 1,
      title: '我来了~',
      maxmin: true,
      //下面还可以快速定义：offset: 't' 置顶；offset: 'r'靠右；offset: 'lb'右下
      offset: ['100px','50px'],
      shadeClose: true, //点击遮罩关闭层
      area : ['800px' , '520px'],
      content: '页面内容'
    });
});
//007.图标
$('#btn-7').click(function(){
	//想显示图标时，默认皮肤可以传入0-6，加载层，可以传入0-2
	layer.alert('哇塞，你选择我了！', {icon: 1});
	// layer.msg('不开心。。', {icon: 5});
});
//008.多个按钮
$('#btn-8').click(function(){
  //用open也行
	layer.confirm('你真帅~', {
    btn: ['算了吧', '得了吧', '拉倒吧'] //可以无限个按钮
    ,title: '颜值提醒'
    ,icon: 6
    ,btn3: function(index, layero){
      alert('扯淡');
    }
    }, function(index, layero){
      alert('扯淡2');
    }, function(index){
      alert('扯淡3');
  });
});
//009.图标
$('#btn-9').click(function(){
  layer.open({
    type: 1,   
    area: ['600px','360px'],
    shadeClose: true, 
    content: '随便你',
    skin: 'layui-layer-molv',    //皮肤,允许你传入layer内置的样式class名layui-layer-lan layui-layer-molv
    shade: [0.3,'#5658aa'],      //透明度和颜色
    shadeClose: false,           //是否点击遮罩关闭弹窗
    time: 2000,                  //自动关闭倒计时
    id: 'onlyone',               //设置ID既是只能打开一个弹窗
    anim: 1,                     //弹窗动画效果0-6
    isOutAnim: true,             //退出动画是否开启
    maxmin: false,               //是否有最大最小化
    fixed: true,                 //滑动滚轮底层是否允许滚动
    resize: true,                //是否允许拉伸
    resizing: function(layero){  //设置窗口拉伸回调，在拖动窗口右下角执行
      console.log(layero);
    },
    scrollbar: false,            //是否允许滚动条
    maxWidth: 360,               //最大宽度，只有当area: 'auto'时，maxWidth的设定才有效。还有maxHeight
    move: '.layui-layer-title',  //是否允许移动或移动触发类，例如move: '.mine-move'
    moveOut: false               //是否允许拖出窗口外。拖动回调：moveEnd: function(layero){}
  });
});
//000.我的样式
$('#btn-0').click(function(){
  //全局配置
  layer.config({
    extend: 'skin/style.css', //加载您的扩展样式
    skin: 'ext-lvfeng'
  });
  //局部配置
  layer.open({
    title: '哇喔',
    extend: 'skin/style.css', //加载您的扩展样式
    skin: 'ext-lvfeng'
  });
});
</script>
</body>
</html>